// 用来匹配筛选具有访问权限的动态路由
// 为什么要把代码写在vuex中呢？
// 答：因为我们筛选出来的具有访问权限的动态路由数据，最终是需要添加到路由规则中的
// 我们这里进行筛选的话，可以把筛选出来的数据直接保存到vuex的变量中，这样可以全局使用，
// 我们就可以轻松获取筛选出来的数据，然后添加到路由规则中。
// 除了在添加路由规则的时候需要用到筛选出来的数据之外，还有一个地方也会用到，就是在渲染侧边栏
// 导航的时候会用到。
// 当我们把筛选出来的动态路由添加回路由规则中，侧边栏导航不会显示吗 ？
// 答：不会，需要我们进行单独处理。

/** *
 * 要实现页面访问权限功能，其实需要实现两个功能
 * 功能一：恢复页面的访问功能
 * 功能二：恢复侧边栏导航的显示
 *
 * 功能一：我们只需要把筛选出来的具有访问权限的路由对象重新添加到路由规则中即可，使用addRoutes方法来添加
 *
 * 功能二：需要进行额外的处理 ---- 具体我们实现的时候再说明
 *
 */
import { rouList, constantRoutes } from '@/router/index'
const state = {
  routes: [] // 声明变量，用于保存筛选出来具有访问权限的动态路由 和静态路由
}

const mutations = {
  setRoutes(state, routes) {
    state.routes = [...constantRoutes, ...routes]
  }
}

const actions = {
  /**
       * 需求：我们要根据menus数组筛选具有访问权限的动态路由数据
       * 实现筛选功能的条件
       * 1、menus数组 --- 从接口中获取
       * 2、所有的动态路由数据 ---- src/router/index.js asyncRoutes
       *
       * */
  filterRoutes(context, menus) {
    // 我们只需要判断到路由对象中的权限标识符存在在menus数组中，
    // 则说明用户具有该路由的访问权限，那就要把他保存起来
    const routes = rouList.filter(item => {
      // 判断item.code 是否存在在menus中
      return menus.includes(item.code)
    })
    // 把筛选出来的具有访问权限的路由保存到vuex中
    context.commit('setRoutes', routes)
    return routes // 在调用此函数的时候方便直接接收使用
  }
}

export default {
  namespaced: true, // 命名空间
  state,
  mutations,
  actions
}
